<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--<link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>

<script>-->
<!--init({-->
<!--title: 'Modal Table',-->
<!--desc: 'Use Bootstrap Table in modal.',-->
<!--links: ['bootstrap-table.min.css'],-->
<!--scripts: ['bootstrap-table.min.js']-->
<!--})-->
<!--</script>-->

<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        积分排名榜
        <small>积分管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">业务积分</a></li>
        <li class="active">积分管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalTable">
                        Launch modal table
                    </button>
                    <!--          <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" onclick="javascript:void(0)">
                              Launch modal table
                            </button>-->
                    <div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">Modal table</h4>
                                </div>
                                <div class="modal-body">
                                    <form></form>
                                    <!--   <table id="table"
                                              data-toggle="table"
                                              data-height="400"
                                              data-search="true"
                                              data-pagination="false"
                                              data-side-pagination="server"
                                              data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">-->
                                    <table
                                            id="table"
                                            data-toggle="table"
                                            data-height="299"
                                            data-ajax="ajaxRequest"
                                            data-search="true"
                                            data-side-pagination="server"
                                            data-pagination="true">
                                        <thead>
                                        <tr>
                                            <th data-field="id">ID</th>
                                            <th data-field="itemName">项目名称</th>
                                            <th data-field="core">积分</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</section>
<!-- /.content -->


<script th:inline="javascript">
    var $table = $('#table')
    console.log("javascript 执行了");

    $table.bootstrapTable('resetView');
    console.log("执行了resetView");

    /*function mounted() {
        console.log("mounted 激活了？？？");
        $('#modalTable').on('shown.bs.modal', function () {
            $table.bootstrapTable('resetView')
        })
    }*/
    var row = {"username": "娜"};

    function ajaxRequest(params) {
        var rankQuery = {
            username: row["username"],
            searchDate: $("#searchDate").val()
        }
        var result = {};
        $.ajax({
            url: CONTEXT_PATH + '/rank/detail',
            async: true,
            cache: false,
            type: "post",
            dataType: "json",
            data: {
                "rankQuery": JSON.stringify(rankQuery)
            },
            success: function (data) {
               // console.log(data["success"] + "," + data["code"] + "," + data["msg"] + "," + data["data"]);
                console.log("sucess data:" + JSON.stringify(data["data"]) + ",长度=" + data["data"].length);
                /*result["total"] = data["data"].length;
                //data["data"]是个数组
                result["rows"] = data["data"];*/
                params.success({
                    total:  data["data"].length,
                    rows: data["data"]
                })
            }
        });
        // params data you need
        console.log("参数param:" + JSON.stringify(params));
        console.log("查询条件：" + params.data);
        // console.log("ajax返回结果："+JSON.stringify(result));
        console.log("包装table数据源：" + JSON.stringify(result));
        <!--改成在sucess中赋值-->
       /* setTimeout(function () {
            console.log("掩饰2秒，包装table数据源：" + JSON.stringify(result));
            params.success({
                total: result["total"],
                rows: result["rows"]
            })
        }, 2000);*/
        // here we just use setTimeout
        /*setTimeout(function () {
            params.success({
                total: 5,
                rows: rows: [{
                'id': 12,
                'itemName': '微用户新增积分',
                'core': 50
            },
                {
                    'id': 13,
                    'itemName': '微用户新增积分',
                    'core': 50
                },
                {
                    'id': 14,
                    'itemName': '考勤积分',
                    'core': 700
                },]
            })
        }, 1000)*/
    }

    /*
        [{"id":"12","cdate":"2019-06-06 00:00:00","dingUserId":"","username":"娜","inOut":1,"itemName":"微用户新增积分","itemDesc":"微用户新增积分","core":50,"createTime":1554348779000,"updateTime":1554348779000},{"id":"13","cdate":"2019-06-07 00:00:00","dingUserId":"","username":"娜","inOut":1,"itemName":"微用户新增积分","itemDesc":"微用户新增积分","core":50,"createTime":1554348779000,"updateTime":1554348779000},{"id":"14","cdate":"2019-06-08 00:00:00","dingUserId":"","username":"娜","inOut":1,"itemName":"考勤积分","itemDesc":"考勤积分","core":700,"createTime":1554348779000,"updateTime":1554348779000},{"id":"15","cdate":"2019-06-09 00:00:00","dingUserId":"","username":"娜","inOut":1,"itemName":"微用户新增积分","itemDesc":"微用户新增积分","core":200,"createTime":1554348779000,"updateTime":1554348779000},{"id":"16","cdate":"2019-06-10 00:00:00","dingUserId":"","username":"娜","inOut":1,"itemName":"业务提成积分","itemDesc":"业务提成积分","core":100,"createTime":1554348779000,"updateTime":1554348779000}]*/
</script>

</html>